<template>
	<view style="width: 100%;">
		<!-- #ifdef H5 -->
		<view class="au-btn">
			<view class="btn-icon">
				<uni-icons @click="backHome" v-if="!isShowBackHome" type="home" color="#fff" size="24"></uni-icons>
				<uni-icons @click="back" v-else type="left" color="#fff" size="24"></uni-icons>
			</view>
			<view class="btn-text" @click="openAuth()" v-if="isAuthBtn">
				<uni-icons type="gear" color="#fff" size="20"></uni-icons>
				权限设置</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="au-btn" :style="{ 'top': searchBarTop + 'px', }">
			<view class="btn-icon">
				<uni-icons @click="backHome" v-if="!isShowBackHome" type="home" color="#fff" size="24"></uni-icons>
				<uni-icons @click="back" v-else type="left" color="#fff" size="24"></uni-icons>
			</view>
			<view class="btn-text" @click="openAuth()" v-if="isAuthBtn">
				<uni-icons type="gear" color="#fff" size="20"></uni-icons>
				权限设置</view>
		</view>
		<!-- #endif -->

	</view>
</template>

<script>
export default {
	name: 'authBuitton',
	props: {
		isAuthBtn: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			searchBarTop: 0, //状态栏高度
			searchBarHeight: 0, //胶囊高度
			searchBarWidth: 0,
			isShowBackHome: false,
		}
	},

	methods: {
		openAuth() {
			this.$emit('openAuth')
			let paramsPageClick = {
				Um_Key_ButtonName: '权限设置',
				Um_Key_SourcePage: `报告详情`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		backHome() {
			uni.reLaunch({
				url: '/pages/waterReport/index'
			})
			let paramsPageClick = {
				Um_Key_ButtonName: '返回首页',
				Um_Key_SourcePage: `报告详情`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		back() {
			uni.navigateBack({
				delta: 1
			})
			let paramsPageClick = {
				Um_Key_ButtonName: '返回上一个页面',
				Um_Key_SourcePage: `报告详情`,
			}
			this.$umaTrack.pageClickTrack(paramsPageClick)
		},
		getHaveRoute() {
			let pages = getCurrentPages()
			if (pages.length > 1) {
				this.isShowBackHome = true
			}
		},
		getHeight() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			//获取胶囊对上高度
			this.searchBarTop = menuButtonInfo.top;
			//获取胶囊高度
			this.searchBarHeight = menuButtonInfo.height;
			//获取胶囊宽度
			this.searchBarWidth = menuButtonInfo.width + 20;
			console.log("导航栏高度：" + this.searchBarHeight, this.searchBarTop)
		}
	},
	created() {

		this.$nextTick(() => {
			// #ifdef MP-WEIXIN
			this.getHeight();
			// #endif

		})
		this.getHaveRoute()
	}
}
</script>

<style lang="scss" scoped>
.au-btn {
	text-align: center;
	position: fixed;
	z-index: 11;
	display: flex;
	align-items: center;
	left: 10rpx;
	/* #ifdef H5 */
	top: 30rpx;

	/* #endif */
	.btn-text {
		width: 190rpx;
		height: 58rpx;
		border-radius: 49rpx;
		background-color: #6099FD;
		font-weight: 600;
		font-size: 26rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.btn-icon {
		margin-right: 20rpx;
	}
}
</style>